<template>
  <div class="m-geo">
    <i class="el-icon-location" />{{ $store.state.geo.position.city }}
    <nuxt-link 
      class="changeCity" 
      to="/changeCity"
    >
      切换城市
    </nuxt-link>
    <div class="near-city">[<a class="city">香河</a><a class="city">廊坊</a><a class="city">天津</a>]</div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/stylus/variable.styl'
  .m-geo
    display inline-block
    height 40px
    line-height 40px
    color #999999
    .near-city
      display inline-block
      .city
        padding 0 4px
        color #666666
        cursor pointer
        &:hover
          color $base-hover-color
    a.changeCity
      margin 0 4px
      padding 0 2px
      background-color #f4f4f4
      border 1px solid #e5e5e5
      border-radius 2px
      color #999999
      &:hover
        color #31bbac

</style>
